<template>
    <div v-if="modelValue" class="no-install-box">
        <div class="tip">
           <div class="flex justify-center items-center mb-4px"> 当前未<el-button link type="primary" @click="installHandle">安装防火墙</el-button></div>
            <div class="cc">(请点击‘安装防火墙’，进行安装)</div>
        </div>
    </div>


</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { setinstallFireWallAPI } from "@/api/systemMonitor"
import { propTypes } from '@/utils/propTypes'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['confirm'])

const props = defineProps({
    modelValue: propTypes.bool.def(false),
})


//弹出框状态
const dialogVisible = ref(props.modelValue)

watch(() => props.modelValue, (newVal) => {
    dialogVisible.value = newVal;
})
//安装
const installHandle=()=>{
    setinstallFireWallAPI().then(()=>{
        ElMessage.success("安装成功")
        emit('confirm')
    })
}
</script>
  
<style lang="less" scoped>
.no-install-box {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;

    .tip {
        font-size: 14px;
        width: 300px;
        height: 80px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-radius: 4px;
        /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
        box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.2);
    }
    .cc{
        font-size: 12px;
        color: #bbb;
    }
}
</style>
  